<!-- 博客广场列表页 可以查看全部博文 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作者主页</title>
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">-->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_lists.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">

    <!-- <img src="image/img1.jpg" alt="加载失败" > -->
    <img src="image/img1.jpg" alt="图片加载失败">
    <span class="title">筱的博客</span>

    <a href="blog_lists.html">博客广场</a>
    <a href="blog_list.html">个人主页</a>

    <!-- 此标签用于占位 分隔 -->
    <div class="spacer" style="width: 1000px"></div>
    <!-- 浏览页有写博客和注销 -->
    <!--    <a href="blog_edit.html">写博客</a>-->
    <!-- 跳转到对应后台 实现删除 会话里的值 -->
    <!--    <a href="user/logout">注销</a>-->
    <!--    单击执行 logout方法-->
    <a href="javascript:logout()">注销</a>
</div>

<!-- 页面主体 -->
<div class="container">
    <!-- 左侧信息 其他页面可以复用-->
    <div class="container-left">

        <!-- .card 盒子 表示用户信息 -->
        <div class="card">
            <img src="" alt="">
            <!-- <h3>筱</h3> -->
            <!-- 根据用户 设定用户名 -->
            <h3></h3>

            <!--             隐藏的用户状态-->
            <span class="state" style="display: none"></span>
            <div class="counter">
                <span>文章数</span>
                <span>获赞数</span>
            </div>

            <div class="counter">
                <span class="count"></span>
                <span class="likecount"></span>
            </div>
        </div>

    </div>

    <!-- 页面博文 展示 动态添加博文 -->
    <div class="container-right">


    </div>

</div>
<!-- 引入jquery源码 -->
<script src="js/jquery.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>-->
<!-- 向后端发起请求获取全部博文josn对象 -->


<script>
    // 获取登录状态 同时设置左侧用户信息
    // 获取 作者个人信息
    let id;
    let authorname;
    function getauthorMessage() {
        // 通过ajax发送 带querystring(url处) 的get请求
        $.ajax({
            url: '/user/getauthorbyuid' + location.search,
            type: 'get',
            success: function (body) {
                if (body != null && body.code == 200 && body.data != null) {
                    let profile=document.querySelector('.card img');
                    profile.src=body.data.photo;
                    // console.log(body.data);
                    let likecount = document.querySelector('.counter .likecount');
                    likecount.innerHTML = body.data.liked;
                    let name = document.querySelector('.card h3');
                    name.innerHTML = body.data.username;
                    authorname= body.data.username;
                    let count = document.querySelector('.counter .count');
                    count.innerHTML = body.data.blogCount;
                    id=body.data.id;
                    getauthorblogs();
                } else {
                    alert("操作异常!");
                    location.assign("blog_lists.html");
                }
            }
        });
    }
    getauthorMessage();


    function getauthorblogs(){
        $.ajax({
            url: "/article/showauthorblogs",
            type: "post",
            data: {
                "id":id
            },
            success: function (body) {
                if(body==null||body.data==null){
                    alert('操作异常');
                    location.assign('blog_lists.html');

                }
                let blogContainer = document.querySelector('.container-right');
                for (let blog of body.data) {
                    // 创建一个blog 盒子 应用设置好的blog类标签
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';

                    let titleDiv = document.createElement('div');
                    titleDiv.className = 'title';
                    titleDiv.innerHTML = blog.title;
                    blogDiv.appendChild(titleDiv);


                    let dateDiv = document.createElement('div');
                    dateDiv.className = 'date';
                    dateDiv.innerHTML = "发文日期:" + blog.updatetime;
                    blogDiv.appendChild(dateDiv);

                    let desc = document.createElement('div');
                    desc.className = 'msg';
                    let authorDiv = document.createElement('span');
                    authorDiv.className='author';
                    authorDiv.innerHTML="作者:"+authorname;
                    desc.appendChild(authorDiv);

                    let rcountDiv = document.createElement('span');
                    rcountDiv.className = 'rcount';
                    rcountDiv.innerHTML = "阅读量: " + blog.rcount;
                    desc.appendChild(rcountDiv);
                    let likedDiv = document.createElement('span');
                    likedDiv.className = 'likedcount';
                    likedDiv.innerHTML = "获赞数:" + blog.likedcount;
                    desc.appendChild(likedDiv);
                    let collection = document.createElement('span');
                    collection.className='collected';
                    collection.innerHTML="收藏数: "+blog.collection_count;
                    desc.appendChild(collection);
                    // 评论
                    let commentcount=document.createElement('span');
                    commentcount.className='commentcount';
                    commentcount.innerHTML="评论数: "+blog.commentcount;
                    desc.appendChild(commentcount);
                    blogDiv.appendChild(desc);
                    let descDiv = document.createElement('div');
                    descDiv.className = 'desc';
                    descDiv.innerHTML = blog.description;
                    let  description = document.createElement('div');
                    description.appendChild(descDiv)
                    description.className='description';
                    blogDiv.appendChild(description);

                    let a = document.createElement('a');
                    //  访问详情页时带上当前博文标签 对应公共详情页
                    a.href = "blogs_detail.html?id=" + blog.id;
                    a.innerHTML = '查看全文&gt;&gt;';
                    blogDiv.appendChild(a);
                    blogContainer.appendChild(blogDiv);
                }


            }
        });
    }


    function logout() {
        if (confirm("您确定要退出登录嘛?")) {
            $.ajax({
                url: "/user/logout",
                type: "post",
                data: {},
                success: function (rel) {
                    if (rel.code == 200) {
                        alert("Bye~");
                        location.assign("blog_login.html");
                    }
                }
            });
        }

    }

</script>

</body>
</html>